<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
     v-if     指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
     v-show  指令用于条件性地渲染一块内容  这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

     使用以上两个指令均可以实现节点的显示和隐藏 但是两者实现的方式不同
     1. v-if    是通过添加和删除节点的形式实现
     2. v-show  是通过添加css样式display实现

     v-if vs v-show
     一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
     因此，如果需要非常频繁地切换，则使用 v-show 较好；
     如果在运行时条件很少改变，则使用 v-if 较好


    v-if的其它使用方式
    1. v-if 可以配合 v-else 进行使用   两者修饰的标签只会显示其中一个
    2. v-if 可以配合 v-else-if 进行使用  构建一个多分支结构
    3. v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别


-->
<div id="app">
    <h1 v-if="awesome">Vue is awesome1!</h1>
    <h1 v-else-if="awesome2">Vue is awesome1!  v-else-if</h1>
    <h1 v-else>Oh no!!!</h1>
    <h1 v-show="awesome">Vue is awesome2!</h1>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            awesome: false,
            awesome2:false
        },
        methods: {}
    })
</script>
</body>
</html>